import { EditableTable, EditableTableColumn } from '@/components/table';
import { CopyOutlined, MinusOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { useEffect, useState } from "react";
import styled from 'styled-components';
import { Input, List, Modal } from 'antd';

import { Button } from '@/components/button';
import { ConnectorDataSource, columnDelete, createTableColumn } from '@/services';
import { CreateColumnForm } from './create-column-form';

export const BaseTableStructure = (props: {
    dataSource: ConnectorDataSource,
    table: string,
    columns: EditableTableColumn[],
    request: () => Promise<Array<any>>,
    onSave: (rowIndex: number, columnId: string, value: unknown, data: { [key: string]: any }) => Promise<any>,
}) => {

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [row, setRow] = useState<any>(null);

    const [version, setVersion] = useState<number>(0);

    useEffect(() => {
        setRow(null);
        setVersion(new Date().getTime());
    }, [props.dataSource, props.table]);

    return (
        <>
            <EditableTable
                version={version}
                header={() => {
                    return (
                        <HeaderContainer>
                            <Button width={36} icon={<PlusOutlined />} onClick={async () => {
                                setIsModalOpen(true);
                            }}></Button>
                            <Button width={36} icon={<MinusOutlined />} disabled={!row} onClick={async () => {
                                //
                                if (!row) {
                                    //
                                    return;
                                }
                                //删除字段
                                let res = await columnDelete(props.dataSource, props.table, row.name, row);
                                console.log(res);
                                //
                                setVersion(new Date().getTime());
                            }}></Button>
                            {/* <Button width={36} icon={<CopyOutlined />} onClick={async () => { }}></Button> */}
                            <Button width={36} icon={<SyncOutlined />} onClick={async () => {
                                setVersion(new Date().getTime());
                            }}></Button>
                        </HeaderContainer>
                    )
                }}
                columns={props.columns}
                selection={true}
                onStateChange={(state) => {
                    console.log(state.rowSelection);
                }}
                request={async (pagination, columnOrder, sorting) => {
                    console.log(pagination, columnOrder, sorting);
                    //获取数据
                    try {
                        //
                        let data = await props.request();
                        return {
                            data: data,
                            total: data.length,
                        };
                    } catch (err) {
                        console.log(err);
                    }
                    return {
                        data: [],
                        total: 0,
                    };
                }}
                onSave={async (rowIndex: number, columnId: string, value: unknown, data: { [key: string]: any }) => {
                    console.log(rowIndex, columnId, value, data);
                    await props.onSave(rowIndex, columnId, value, data);
                    return true;
                }}
                onClickCell={async (rowIndex: number, columnIndex: number, columnId: string, data: { [key: string]: any }) => {
                    setRow(data);
                }}
            ></EditableTable >

            <Modal open={isModalOpen} footer={false} onOk={() => {
                setIsModalOpen(false);
            }} onCancel={() => {
                setIsModalOpen(false);
            }}>
                <CreateColumnForm layoutType={'Form'}
                    databaseType={props.dataSource.database_type}
                    onSave={async (values) => {
                        //创建数据源并保存
                        try {
                            let res = await createTableColumn(props.dataSource, props.table, values);
                            if (res) {
                                setVersion(new Date().getTime());
                            } else {

                            }
                            setIsModalOpen(false);
                        } catch (error) {
                            console.log(error);
                        }
                    }}></CreateColumnForm>
            </Modal>
        </>
    );
};

export default BaseTableStructure;


const HeaderContainer = styled.div`
    width: 100%;
    height: 40px;
    border-bottom: 1px solid lightgray;
    display: flex;
    justify-content: flex-start;
`;
const Space = styled.div`
`;